<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>011-径向渐变</title>
		<style>
			.box {
				width: 300px;
				height: 200px;
				border: 1px solid black;
				float: left;
				margin-left: 50px;
				font-size: 40px;
				margin-top: 20px;
			}

			.box1 {
				background-image: radial-gradient(red, yellow, green);
			}

			.box2 {
				background-image: radial-gradient(at left top, red, yellow, green);
			}

			.box3 {
				background-image: radial-gradient(at 100px 50px, red, yellow, green);
			}

			.box4 {
				background-image: radial-gradient(circle, red, yellow, green);
			}

			.box5 {
				/* 100 100 圆的半径 */
				background-image: radial-gradient(100px 100px, red, yellow, green);
			}

			.box6 {
				background-image: radial-gradient(red 50px, yellow 100px, green 150px);
			}
		</style>
	</head>
	<body>
		<div style="clear: both">
			<div class="box box1">1</div>
			<div class="box box2">2</div>
			<div class="box box3">3</div>
			<div class="box box4">4</div>
			<div class="box box5">5</div>
			<div class="box box6">6</div>
		</div>
	</body>
</html>
